<template>
  <div v-if="resource.includes(auth)">
    <slot> 请插入需要鉴权的组件 </slot>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';

import { PropsType } from './type';

const { auth } = defineProps<PropsType>();

const route = useRoute();

const resource = ref<string[]>([]);

watch(
  () => route.path,
  () => {
    if (route.meta?.resource) {
      resource.value = (route.meta?.resource as { code: string }[])?.map(
        (item: { code: string }) => item.code,
      ) as string[];
    } else {
      resource.value = [];
    }
  },
  {
    immediate: true,
    deep: true,
  },
);
</script>

<style lang="less" scoped></style>
